<template>
  <div class="app-container bg-gray">
    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
      <el-card>
        <div class="model-data">
          <div class="item">
            <span>反馈总数</span>
            <div><span class="num">{{ info['totalOrderCount'] }}</span><span>条</span></div>
            <router-link to="/superWorkOrder/feedback">
              <el-button size="mini" type="text">详情</el-button>
            </router-link>
          </div>
          <div class="item">
            <span>已解决反馈</span>
            <div><span class="num">{{ info['solveOrderCount'] }}</span><span>条</span></div>
            <router-link to="/superWorkOrder/feedback">
              <el-button size="mini" type="text">详情</el-button>
            </router-link>
          </div>
          <div class="item">
            <span>新增反馈</span>
            <div><span class="num">{{ info['newOrderCount'] }}</span><span>条</span></div>
            <router-link to="/superWorkOrder/feedback">
              <el-button size="mini" type="text">详情</el-button>
            </router-link>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="margin-top-20">
      <el-card>
        <div slot="header">各项指标</div>
        <el-col :span="8">
          <el-form label-width="140px">
            <el-form-item label="群众反馈数量">{{ info['showChartData']['list']['feedbackCount'] }}</el-form-item>
            <!--<el-form-item label="网格员签收数">{{ info['showChartData']['list']['sign_for'] }}</el-form-item>-->
            <!--<el-form-item label="网格员处理数">{{ info['showChartData']['list']['admin_feedback'] }}</el-form-item>-->
            <el-form-item label="完成率">{{ info['showChartData']['list']['completeRate'] }}</el-form-item>
            <el-form-item
              v-for="item in info['showChartData']['data']"
              :key="item['name']"
              :label="item['name']">
              {{ item['value'] }}
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="16" align="center">
          <el-radio-group v-model="select" size="small">
            <el-radio-button :label="0">全部反馈完成率</el-radio-button>
            <el-radio-button :label="1">7日反馈完成率</el-radio-button>
            <el-radio-button :label="2">15日反馈完成率</el-radio-button>
            <el-radio-button :label="3">30日反馈完成率</el-radio-button>
          </el-radio-group>
          <pie-chart :chart-data="info.showChartData" class="margin-top-20"/>
        </el-col>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="margin-top-20">
      <el-card>
        <div class="header">
          <div class="title">
            <el-date-picker
              v-model="searchDate"
              class="picker"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getData"/>
            <el-button type="success" size="small" class="bg-green" style="float:right;" @click="toExportData">导出数据</el-button>
          </div>
        </div>
        <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border row-class-name="cursor-p" class="margin-top-20" @sort-change="handleSortChange">
          <el-table-column prop="time" label="时间" min-width="120" header-align="center" align="center" sortable/>
          <el-table-column prop="totalOrderCount" label="反馈数量(单)" min-width="120" header-align="center" align="center" sortable/>
          <el-table-column prop="pendingOrderCount" label="待处理(单)" min-width="120" header-align="center" align="center" sortable/>
          <el-table-column prop="acceptOrderCount" label="处理中(单)" min-width="120" header-align="center" align="center" sortable/>
          <el-table-column prop="solveOrderCount" label="已解决(单)" min-width="120" header-align="center" align="center" sortable/>
          <el-table-column prop="completeRate" label="完成率" min-width="110" header-align="center" align="center" sortable>
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.completeRate }}%</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          :total="total"
          class="pagination"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"/>
      </el-card>
    </el-col>
    <el-col style="height: 60px;"/>
  </div>
</template>

<script>
import PieChart from '../components/PieChart';
import { handleSortChange, handleSizeChange, handleCurrentChange } from '@/utils/table'
export default {
  components: {
    PieChart
  },
  data() {
    return {
      select: 0,
      // 数据
      info: {
        // 考试总数
        totalOrderCount: 0,
        // 试卷数量
        solveOrderCount: 0,
        // 新增考生
        newOrderCount: 0,
        // 饼图数据
        showChartData: {
          'title': '',
          'data': [],
          'list': {}
        },
        chartData: []
      },

      // 表格相关数据
      searchDate: [],
      tableMaxHeight: 600,
      tableLoading: false,
      multipleSelection: [],
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [10, 20, 50, 100, 1000],
      total: 0,
      tableData: []
    }
  },
  watch: {
    select: {
      handler(val) {
        this.info.showChartData = this.info.chartData[val]
      }
    }
  },
  created() {
    this.loadData();
    this.getData();
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange,
    loadData() {
      const url = 'newWork/statistic/getData'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        const temp = res.data || {};
        temp.showChartData = res.data.chartData[0];
        Object.assign(this.info, temp);
      }).catch(e => {
        this.$message.error(e.msg || '系统错误');
      })
    },

    getData(order) {
      this.tableLoading = true;
      order || (order = {});
      const url = 'newWork/statistic/getChooseData';
      const data = {
        pageNo: this.currentPage,
        pageSize: this.pageSize
      };
      this.searchDate && this.searchDate.length !== 0 && (data.startTime = this.searchDate[0] + ' 00:00:00', data.endTime = this.searchDate[1] + ' 23:59:59')
      order.sortName && (data.sortName = order.sortName);
      order.sortOrder && (data.sortOrder = order.sortOrder);
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      });
    },

    // 导出数据
    toExportData() {
      this.downloadLoading = true;
      let url = this.$store.getters.serverUrl + '/admin/newWork/statistic/exportData?token=' + this.$store.getters.token;
      this.searchDate && this.searchDate.length !== 0 && (url = (url + '&startTime=' + this.searchDate[0] + ' 00:00:00' + '&endTime=' + this.searchDate[1] + ' 23:59:59'));
      window.open(url + '&mallId=' + this.$store.getters.SaaSId);
      this.downloadLoading = false;
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .model-remark{
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    background-color: white;
    margin-bottom: 20px;
    padding: 0 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .model-data {
    height: 108px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .item {
      flex: 1;
      padding-left: 12%;
      border-right: 1px solid $gray;

      &:last-child {
        border-right: none;
      }

      span {
        font-size: 14px;
      }

      div {
        margin-top: 16px;

        .num {
          font-size: 26px;
          margin-right: 10px;
        }
      }
    }
  }
  .el-form-item{
    margin-bottom: 12px;
  }
</style>
